    <template>
        <div class="map-container" ref="container">
            <full-screen :container="containerRef"></full-screen>
            <div ref="mapElement" class="map"></div>

            <div class="overlay-container">
                <!-- 搜索和全屏控制 -->
                <div class="control-group top-left" v-if="controls.searchBar.visible">
                    <map-search v-if="map" ref="mapSearch" :map-instance="map" @handle-search="handleSearch"
                        :search-options="searchOptions" />
                    <slot name="search-bar"></slot>
                    <div id="panel" class="nav-menu" v-show="controls.navBar.visible"></div>
                </div>
                <!-- 新增左侧菜单 -->
                <div class="control-group left-menu" v-if="uiState.showLeftMenu && map"
                    v-show="controls.leftMenu.visible">
                    <layer-control :layers="layers" ref="layerControl" :presetStyles="presetStyles" :map="map"
                        @close-layer-settings="controls.leftMenu.visible = false" />
                    <slot name="left-menu"></slot>
                </div>

                <!-- 新增右侧普通div面板 -->
                <div class="control-group  right-panel" v-show="controls.rightPanel.visible"  :class="{ 'collapsed': isPanelCollapsed }" ref="rightPanel"
                    :style="{
                        width: mapWidth * 0.4 + 'px',
                        height: isPanelCollapsed ? '30px' : '80vh',
                        left: panelPosition.x + 'px',
                        top: panelPosition.y + 'px'
                        }" @mousedown="startDrag">
                    
                    <div class="panel-header"   @mousedown.stop="startDrag">
                        <h3>  <i @click="togglePanel" :class="isPanelCollapsed ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></i>信息面板<span>(点击进行拖拽)</span></h3>

                          <full-screen :container="rightPanelRef" style="top:5px;right: 40px;"></full-screen>
                        <el-button type="text" @click="controls.rightPanel.visible = false" class="close-btn">
                            ×
                        </el-button>
                    </div>
                    <div v-if="!isPanelCollapsed">
                        <panel-content  v-if="controls.rightPanel.visible" :activeTabs="controls.rightPanel.activeTabs">
                            <template #right-panel>
                                <slot name="right-panel"></slot>
                            </template>
                        </panel-content>
                    </div>
                    
                </div>
                <!-- 新增指挥舱控制 -->
                <command-pod class="control-group" v-if="map" ref="commandPodRef" :expanded="uiState.podExpanded"
                    :controls="controls" :tools="fixedTools" :map-instance="map"
                    @toggle-expanded="toggleExpendedHandler" @tool-toggle="changeTool"
                    @panel-control-change="commondPanelChange" />
                
                <!--顶部信息栏-->
                <top-info-bar v-if="controls.topInfoBar.visible" :selectedFeature="selectedFeature" class="control-group top-info-bar"/>
                
                <!-- 新增底部信息栏 -->
                <bootom-info-bar v-if="controls.infoBar.visible" :selectedFeature="selectedFeature" :map="map" class="control-group bottom-info-bar"/>
                
                <!-- 地图切换卡片 -->
                <map-switch v-if="controls.mapBar.visible" class="control-group top-right"
                    :mapInstance="map"></map-switch>

                <!-- 工具栏插槽 -->
                <tool-bar v-if="controls.toolBar.visible && map" ref="toolBar" :map="map" :fixedTools="fixedTools"
                    class="control-group bottom-right" :defaultTools="defaultTools" @tool-change="activateTool"
                    @draw-overlay="drawOverlayHandler">
                </tool-bar>
                <feature-popup v-if="map" ref="featurePopup" :map="map" :exclude-keys="['geometry', 'id', 'layerType']"
                    feature-title="详细信息" @create-feature="createPointFeature" />
            </div>
        </div>
    </template>
<script lang="ts">
import { Component, Vue, Prop, Ref, Emit } from 'vue-property-decorator';

import LayerControl from '@/components/Map/LayerControl.vue'; // 导入新组件
import PanelContent from '@/components/Map/PanelContent.vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { initAMapSecurity, getRequiredPlugins, handleZoomToFeature ,selectLocation} from '@/utils/amap-helper';
import FullScreen from '../FullScreen.vue';
import MapSwitch from './MapSwitch.vue';
import CommandPod from './CommandPod.vue';

import { DEFAULT_TOOLS, PRESET_STYLES, FIXED_TOOLS, DEFAULT_CONTROLS, createLayerConfig } from '@/config/mapConfiguration';
import { toLocation } from '@/config/mapFunction';
import MarkerInfo from './MarkerInfo.vue';
import ToolBar from './ToolBar.vue';
import { Getter } from 'vuex-class';
import MapSearch from './MapSearch.vue';
import FeaturePopup from '@/components/Map/FeaturePopup.vue';
import BootomInfoBar from './BootomInfoBar.vue';
import TopInfoBar from './TopInfoBar.vue';
import {
    getLayerByName,
} from '@/config/mapFunction';
declare const AMap: any;

@Component({
    methods: {},
    components: { LayerControl, PanelContent, FullScreen, MapSwitch, CommandPod, MarkerInfo, ToolBar, MapSearch, FeaturePopup, BootomInfoBar,TopInfoBar}
})
export default class BaseMap extends Vue {

    @Prop({ default: () => DEFAULT_TOOLS }) defaultTools;
    @Prop({ type: Array, default: () => [111.670801, 40.818311] }) center!: number[];
    @Prop({ type: Number, default: 14 }) zoom!: number;


    @Ref('layerControl') layerControl;
    @Ref('toolBar') toolBar;
    @Ref('mapSearch') mapSearch;
    @Ref('rightPanel') rightPanelRef;
    private isPanelCollapsed = false;
      // 面板位置状态
  private panelPosition = { x: 0, y: 0 };
  // 拖拽状态
  private isDragging = false;
  private dragStart = { x: 0, y: 0 };
    private presetStyles = PRESET_STYLES;
    private controls = DEFAULT_CONTROLS;
    layers = createLayerConfig();
    private fixedTools = FIXED_TOOLS(this);
    @Getter departInfo;
    private searchOptions: any = {
        city: '内蒙古自治区',
        pageSize: 10,
        pageIndex: 1,
        extensions: 'base'
    };
    private selectedFeature: any = null;

    // 地图配置
    private mapOptions: any = {
        key: process.env.VUE_APP_AMAP_KEY, // 替换为你的实际key
        version: "2.0",
        plugins: [],

    };
    map: any = null;
    private mapWidth = 0;
    private mapHeight = 0;
    @Ref('container') private containerRef!: any;

    private currentCoordinate: any = [0, 0];
    @Ref("featurePopup") featurePopup;
    private uiState: any = {
        showLeftMenu: true,
        podExpanded: false,
    };

    private objectData: any;
    private searchOk = false;
    private togglePanel() {
         this.isPanelCollapsed = !this.isPanelCollapsed;
 
    }

    featureList() {
        const ovrelays = this.toolBar.getOverlays();

        return ovrelays.map(f => {
            const type_ = f.getType();

            let dt: any = {
                id: f.getId(),
                name: f.get('name') || '未命名',
                type: f.get('type'),
                geometry: f.getGeometry()
            };
            switch (type_) {
                case 'marker':
                    console.log('marker', f)
                    dt.flat = f.get('coordinate');
                    break;
                case 'circle':
                    dt.radius = f.get('radius');
                    break;
            }

            return dt;
        }

        );
    }

    getOverlays() {
        return this.toolBar.overlays;
    }

    private removeFeature(feature: any) {
        this.$confirm(`确认删除元素【${feature.extData.name}】码？`, '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.toolBar.removeOverlay(feature);
            feature.getExtData().marked = false;
        });
    }
    changeTool(tool: any) {
        console.log(tool)
    }

    showPopup(feature: any, currentOverlay: any) {
        this.featurePopup.showPopup(feature, currentOverlay);
    }

    searchResultHandler(data: any) {
        this.searchOk = true;
        console.log('search result', data)
        if (!this.controls.navBar.control) {
            const control = new AMap.ControlBar({
                map: this.map,
                position: 'topright',
                id: 'navBar'
            })
            this.controls.navBar.control = control;
            this.controls.navBar.visible = true
        }
    }

    closeNavbar() {
        // 查找导航面板标题元素
        const panel = document.getElementById('panel');
        if (panel) {
            const noBusElements = panel.querySelectorAll('.plan-nobus');
            noBusElements.forEach((el: any) => {
                el.style.display = 'none';
            });
        }
    }
    commondPanelChange(control) {
        switch (control.label) {
            case "菜单栏":
                if (control.visible) {
                    this.uiState.podExpanded = false;
                    this.$emit('close-search');
                    this.mapSearch?.clearSearch();
                    this.closeNavbar();
                }
                break;
            case "导航栏": {
                if (control.visible) {
                    this.uiState.podExpanded = false;
                    this.controls.leftMenu.visible = false

                }
            }
        }
    }

    toggleExpendedHandler() {
        this.uiState.podExpanded = !this.uiState.podExpanded;
        if (this.uiState.podExpanded) {
            this.mapSearch?.clearSearch();
            this.$emit('close-search');
            this.controls.leftMenu.visible = false;
            this.controls.navBar.visible = false;
            this.closeNavbar();
        }
    }

    drawOverlayHandler(overlay: any) {
        console.log(overlay)
        this.selectedFeature = overlay;
    }

    getLayerByName(name) {
        return getLayerByName(this.layers, name)
    }

    activateTool(tool) {
        console.log(tool)
        this.$emit('tool-change', tool.name);
        switch (tool.name) {
            case 'clean':
                if(this.controls.navBar.control){
                    this.map.remove(this.controls.navBar.control);
                    this.controls.navBar.control.clear();
                    this.controls.navBar.control = null;
                    this.controls.navBar.visible = false;
                }
                break;
        }
        this.showFeaturePopup();
    }

    showFeaturePopup() {
        if (!this.controls.rightPanel.visible) {
            this.controls.rightPanel.visible = true;
            setTimeout(() => {
                (this as any).$bus.$emit('panel-switch', 1);
            }, 200);

        }
    }

    beforeDestroy() {
        window.removeEventListener('resize', this.calculateMapSize);
    }
    /**
     * 在组件挂载完成后执行的函数。
     * 
     * 在组件挂载完成后执行一系列初始化操作，包括初始化地图、计算地图尺寸、添加窗口大小变化监听事件、以及处理来自事件总线的不同事件。
     */
    mounted() {
        this.$nextTick(() => {
            this.initMap();
            this.calculateMapSize();
            window.addEventListener('resize', this.calculateMapSize);
            (this as any).$bus.$on('zoomToFeature', (feature) => {
                handleZoomToFeature(this.map, feature);
                this.selectedFeature = feature;
            });

            (this as any).$bus.$on('removeFeature', (feature) => {
                this.removeFeature(feature);
            });
            (this as any).$bus.$on('getRouter', (item) => {
                if (!item.feature) {
                    this.$message.error("请选择一个目标要素");
                    return;
                }
                this.gotoMarker(item);

            });

            (this as any).$bus.$on('toLocation', location => {
                if (!location) {
                    this.$message.error("请输入正确的坐标");
                    return;
                }
                if (location.includes(',')) {
                    toLocation(this, location.split(','));
                }
            });
            this.searchOptions.city = this.departInfo.areaName;
             this.panelPosition = {
                x: window.innerWidth - this.mapWidth * 0.4 - 80,
                y: 10
            };
        });
        // 初始化面板位置（右上角）
   
    }

    async gotoMarker(item) {
        try {
           
            const startPoint = item.location.split(','); // 获取起点坐标
            let endCoord: any;
     
            switch (item.feature.CLASS_NAME) {
                case 'AMap.Marker':
                    endCoord = item.feature.getPosition();
                    break;
                case 'Overlay.Circle':
                    endCoord = item.feature.getCenter();
                    break;
            }
            // 获取目标点坐标

            if (!startPoint || !endCoord) {
                this.$message.error('无法获取路径起止点');
                return;
            }
            console.log(startPoint, endCoord)
            //构造路线导航类
            this.controls.navBar.control = new AMap.Driving({
                map: this.map,
                panel: "panel"
            });
            // 根据起终点经纬度规划驾车导航路线
            this.controls.navBar.visible = true;
            this.controls.navBar.control.search(new AMap.LngLat(startPoint[0], startPoint[1]), new AMap.LngLat(endCoord.lng, endCoord.lat), (status, result) => {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {

                    this.$message.success('绘制驾车路线完成');
                    this.map.setCenter(startPoint)
                } else {
                    this.$message.error('获取驾车数据失败：' + result)
                }
            });

            this.$message.success('路径规划完成');
        } catch (error) {
            this.$message.error('路径规划失败: ' + error.message);
        }
    }

    private infoWindow;
    private placeSearch;
    private async initMap() {

        initAMapSecurity();
        this.mapOptions.plugins = getRequiredPlugins(this.controls.searchBar.visible);
        await AMapLoader.load(this.mapOptions);
        this.map = new AMap.Map(this.$refs.mapElement as HTMLElement, {
            center: this.center,
            zoom: this.zoom,
            resizeEnable: true,
            mapStyle: 'amap://styles/normal',
            optimizeMode: true,  // 开启优化模式
            viewMode: '3D',      // 启用3D渲染
            terrain: true,       // 开启3D地形渲染
            showIndoorMap: false,// 关闭室内地图
            isHotspot: true,
            WebGLParams: {       // WebGL参数
                preserveDrawingBuffer: true,
                rotateEnable: true,   // 使用旋转
                pitchEnable: true
            }
        });

        this.map.on('hotspotover', (result) => {

            this.placeSearch.getDetails(result.id, (status, result) => {
                if (status === 'complete' && result.info === 'OK') {
                    this.placeSearch_CallBack(result);
                }
            });
        });
        // 添加地图控件
        AMap.plugin(['AMap.ControlBar', 'AMap.ToolBar', 'AMap.GeoJSON', 'AMap.MapType', 'AMap.Bounds', 'AMap.Driving', 'AMap.PlaceSearch', 'AMap.InfoWindow'], () => { //异步加载插件
            this.placeSearch = new AMap.PlaceSearch();  //构造地点查询类
            this.infoWindow = new AMap.InfoWindow({});
        });
    }


    //回调函数
    placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
        var poiArr = data.poiList.pois;
        if (poiArr[0]) {
            var location = poiArr[0].location;
            this.infoWindow.setContent(this.createContent(poiArr[0]));
            this.infoWindow.open(this.map, location);
        }
    }
    createContent(poi) {  //信息窗体内容
        let s: any = [];
        s.push('<div class="info-title">' + poi.name + '</div><div class="info-content">' + "地址：" + poi.address);
        s.push("电话：" + poi.tel);
        s.push("类型：" + poi.type);
        s.push('<div>');
        return s.join("<br>");
    }


    private calculateMapSize() {
        this.mapWidth = this.containerRef.clientWidth;
        this.mapHeight = this.containerRef.clientHeight;
    }

    public openRightPanel() {
        this.controls.rightPanel.visible = true;
    }

    public addObjectLayer(val: any, layerName: string, layerType: string) {
        if (!this.map) return;

        this.layerControl.addVectorLayer(layerName, layerType, val);
        this.objectData = val;

        
  // 获取图层并添加事件监听
  const layer = this.getLayerByName(layerName);
  if (!layer) return;

  // 延迟确保图层加载完成
  setTimeout(() => {
    layer.eachOverlay((overlay: any) => {
      // 点击事件 - 显示详细信息
      overlay.on('click', (e: any) => {
        const extData = overlay.getExtData();
        this.featurePopup.showOverlay(overlay);
      
        extData.type = overlay.CLASS_NAME;
        console.log(overlay.CLASS_NAME)
        overlay.extData = extData;
        this.toolBar.parseFreatureData(overlay);
        this.$set(this,'selectedFeature', {extData:extData});
        console.log(this.selectedFeature);
     
        this.$emit('feature-click', extData); // 触发自定义事件
      });

      // 鼠标移入 - 高亮要素
      overlay.on('mouseover', (e: any) => {
        this.highlightFeature(overlay);
        this.$emit('feature-hover', overlay.getExtData()); // 触发自定义事件
      });

      // 鼠标移出 - 恢复样式
      overlay.on('mouseout', (e: any) => {
        this.resetFeatureStyle(overlay);
      });
    });
  }, 300);
    }

    // 高亮要素方法
private highlightFeature(overlay: any) {
  if (overlay instanceof AMap.Marker) {
    overlay.setIcon(selectLocation);
  } else if (overlay instanceof AMap.Polygon) {
    overlay.setOptions({
      fillColor: 'rgba(255,0,0,0.3)',
      strokeColor: '#ff0000',
      strokeWeight: 3
    });
  }
}

// 重置要素样式
private resetFeatureStyle(overlay: any) {
 const extData = overlay.getExtData();
  if (overlay instanceof AMap.Marker) {
    overlay.setIcon(extData.iconUrl);
  } else if (overlay instanceof AMap.Polygon) {
    overlay.setOptions({
      fillColor: extData.fill,
      strokeColor: extData.storke,
      strokeWeight: 2
    });
  }
}


    // 创建点要素方法
    createPointFeature(overlay, properties) {
        this.toolBar.addOverlay(overlay, properties);
        overlay.getExtData().marked = true;
        this.showFeaturePopup();
    }

    private showFeatureInfo(feature: any) {
        const geometry: any = feature.getGeometry();
        if (!geometry) return;

        const coord = geometry.getCoordinates();
        const props = feature.getProperties();

        this.$message.success(`选中标记点：
            坐标: ${coord[0].toFixed(6)}, ${coord[1].toFixed(6)}
            创建时间: ${props.createTime}`);
    }


    @Emit('search')
    private async handleSearch(searchKeyword: string) {
        this.$message.success("开始查询");
        this.mapSearch?.clearSearch();
        this.uiState.podExpanded = false;
        this.controls.leftMenu.visible = false;
        return searchKeyword;
    }

    public innerMapSearch() {
        this.mapSearch.searchMap();
    }

    // 开始拖拽
  private startDrag(event: MouseEvent) {
    // 只允许标题栏触发拖拽
    if (event.target instanceof HTMLHeadingElement || 
        event.target instanceof HTMLElement && event.target.classList.contains('panel-header')) {
      this.isDragging = true;
      this.dragStart = {
        x: event.clientX - this.panelPosition.x,
        y: event.clientY - this.panelPosition.y
      };
      
      // 添加全局事件监听
      document.addEventListener('mousemove', this.dragPanel);
      document.addEventListener('mouseup', this.stopDrag);
    }
  }
  
  // 拖拽面板
  private dragPanel(event: MouseEvent) {
    if (this.isDragging) {
      this.panelPosition = {
        x: event.clientX - this.dragStart.x,
        y: event.clientY - this.dragStart.y
      };
      
      // 边界检查
      this.checkBoundaries();
    }
  }
  
  // 边界检查
  private checkBoundaries() {
    const panelWidth = this.mapWidth * 0.4;
    const panelHeight = this.isPanelCollapsed ? 30 : window.innerHeight * 0.8;
    
    // 确保面板不会移出视口
    this.panelPosition.x = Math.max(0, Math.min(window.innerWidth - panelWidth - 20, this.panelPosition.x));
    this.panelPosition.y = Math.max(10, Math.min(window.innerHeight - panelHeight - 20, this.panelPosition.y));
  }
  
  // 停止拖拽
  private stopDrag() {
    this.isDragging = false;
    
    // 移除全局事件监听
    document.removeEventListener('mousemove', this.dragPanel);
    document.removeEventListener('mouseup', this.stopDrag);
  }
}
</script>

<style scoped>
.map-container {
    position: relative;
    width: 100%;
    height: 100vh;
    transition: all 0.3s;
}

.map {
    width: 100%;
    height: 100vh;
}
.right-panel.collapsed {

height: 30px; /* 标题栏高度 */

overflow: hidden; /* 隐藏超出部分 */

}
.control-group {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    /* 恢复控件交互 */
    z-index: 2;
}

.left-menu {
    left: 10px;
    top: 80px;
    /* 避开搜索栏 */
    width: 220px;
    z-index: 3;

}

.nav-menu {
    left: 0px;
    top: 0px;
    /* 避开搜索栏 */
    width: 220px;
    z-index: 2000;
    width: 200px;
}

.top-left {
    top: 10px;
    left: 10px;
}

.top-right {
    top: 20px;
    right: 100px;
}

.bottom-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

button:hover {
    background: #f0f0f0;
}

button.active {
    background: #1890ff;
    color: white;
    border-color: #1890ff;
}

.overlay-container {
    position: absolute;
    /* 改为fixed定位 */
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 允许地图交互穿透 */
}

.panel-header {
    padding: 0px 10px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    ;
    background: #f8f9fa;
    height: 30px;
     cursor: pointer; /* 添加手型指针 */
  transition: background 0.2s;
}
.panel-header:hover {
  background: #e6f7ff; /* 悬停效果 */
}

.panel-header h3 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 14px;
  color: #1a1a1a;
}

.panel-header i {
  margin-right: 8px;
  font-size: 12px;
  color: #1890ff;
  transition: transform 0.3s;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-btn {
    font-size: 16px;
    color: #999;
    padding: 4px 6px;

    &:hover {
        color: #666;
    }
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
 /* 面板内容过渡效果 */
/* .panel-content {
  transition: all 0.3s ease;
  overflow: hidden;
} */

/* 添加折叠动画 */
.collapse-enter-active, .collapse-leave-active {
  transition: max-height 0.3s;
  max-height: 500px;
}
.collapse-enter, .collapse-leave-to {
  max-height: 0;
  overflow: hidden;
}


.default-content {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bottom-info-bar {

    /* 恢复交互能力 */
    z-index: 2002;
    position: fixed;
    bottom: 1px;
    left: 50%;
    font-size: 10px;
    width: 300px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 5px;
    border-radius: 8px;
    display: flex;
    gap: 20px;
}

.top-info-bar {
    /* pointer-events: auto;恢复交互能力 */
    z-index: 2002;
    position: fixed;
    top: 120;
    left: 50%;
    /* transform: translateX(-50%); */
    background: rgba(255, 255, 255, 0.9);
    padding: 0px 10px;
    border-radius: 8px 8px 0 0;
    display: flex;
    gap: 20px;
    width:500px;
    color: #1e00ff;
}

.location-input {
    z-index: 2000;
}

.location-input {
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 600px;
    /* 可选：限制最大宽度 */
    margin: 20px;
}

.location-input input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.location-input button {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 颜色选择器样式 */
.el-color-picker__trigger {
    width: 40px;
    height: 30px;
}

/* 弹窗样式 */
.el-dialog__body {
    padding: 20px;
}

.el-form-item {
    margin-bottom: 18px;
}

/* 在样式部分添加 */
.icon-radius:before {
    content: "⦿";
    margin-right: 5px;
}

.info-block.radius {
    color: #0066cc;
    background: rgba(0, 102, 204, 0.1);
    padding: 8px;
    border-radius: 4px;
}

.amap-marker>.custom-marker {
    width: 30px;
    height: 30px;
    background: url('~@/assets/image/location.png') no-repeat !important;

}

.custom-marker-active {
    background-image: url('~@/assets/image/location-icon-32.png');
}

.right-panel {
    position: absolute;
    right: 28px;
    top: 10px;
    height: 80vh; 

    max-height: 80vh;   /* 最大高度为视口的80% */
    background: rgba(255, 255, 255, 0.98);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1);
    z-index: 20001;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ebeef5;
    pointer-events: auto;
    padding: 1px;
}

#container {
    width: 100%;
    height: 100%;
}

#panel {
    position: relative;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    left: 0px;
    width: 200px;
}

#panel .amap-call {
    background-color: #009cf9;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
}

</style>